<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>蓝风短链平台</title>
    <meta http-equiv="description"
          content="蓝风短链平台提供专业的网址缩短服务，具有稳定、快速、安全的特点，帮您把冗长的URL地址缩短成6个字符以内的短网址，支持批量缩短，淘宝百度网址缩短、营销数据分析、开放API接口等服务"/>
    <meta http-equiv="keywords"
          content="蓝风软件,短链生成,在线短链生成,长链转短链,短网址,短链接,短连接,网址缩短,短域名,短地址,缩短网址,url缩短,短网址生成,短网址在线生成,短网址生成器,短网址在线转换,短网址接口,免费短网址"/>
    <link rel="icon" th:href="@{/images/favicon.ico}">
    <link rel="bookmark" th:href="@{/images/favicon.ico}">
    <link rel="stylesheet" href="https://lf3-cdn-tos.bytecdntp.com/cdn/element-ui/2.15.7/theme-chalk/index.min.css">
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/vue/2.6.12/vue.min.js" type="application/javascript"></script>
    <script src="https://lf26-cdn-tos.bytecdntp.com/cdn/element-ui/2.15.7/index.min.js"></script>

    <style>
        html, body {
            margin: 0;
            height: 100%;
            padding: 0;
            font-family: 'microsoft yahei', Tahoma, Verdana, sans-serif, simsun;
            font-size: 13px;
            color: #505050;
        }

        a {
            color: #606288;
        }

        h1, h2, h3, ul, li {
            margin: 0;
            padding: 0;
        }

        h1, h2, h3, h4, h5 {
            font-weight: bold;
        }

        p {
            margin: 0 0 10px;
            line-height: 2;
        }

        .header h1 {
            padding: 20px 0 0;
            font: bold 18px 'microsoft yahei', 'ºÚÌå', 'ËÎÌå';
            color: #E06329;
        }

        #bd {
            width: 1200px;
            margin: 20px auto;
            background: #F0F5F8;
        }

        .wrap {
            margin: 0 0 10px;
            border: 1px solid #CDE1EF;
            background: #fff;
        }

        .block {
            padding: 10px;
        }

        .block .hd {
            padding: 0 0 15px 15px;
            border-bottom: 1px solid #CEE1EE;
        }

        .block h3 {
            padding: 6px 0;
            color: #336699;
            font-size: 16px;
        }

        .block h4 {
            font-size: 14px;
        }

        .block h5 {
            font-size: 13px;
        }

        .block .bd {
            padding: 6px 0 0 15px;
        }

        .block .bd strong {
            color: #000;
            font-weight: normal;
        }

        .block .ft .imgMain {
            padding: 10px 0 0;
            text-align: center;
        }

        .block .ft ul {
            height: 30px;
            margin: 0 0 0 250px;
        }

        .block .ft li {
            float: left;
            margin: 0 50px 0 20px;
        }

        .block ul {
            margin: 0 0 0 30px;
        }

        ul.index {
            line-height: 1.8;
        }

        table tr th {
            border: 1px solid #ccc;
            height: 30px;
            background-color: #ccc;
        }

        table tr th, table tr td {
            border: 1px solid #ccc;
            height: 40px;
        }

        table {
            text-align: center;
            border-collapse: collapse;
        }
    </style>
</head>
<body>
<div id="app" style="height: 100%;">
    <el-container style="height: 100%;">
        <el-header style="padding: 0;">
            <el-row style="background-color:#00162A; height: 60px">
                <el-col :span="8">
                    <span style="color: white;font-size: 30px;font-weight: bold;line-height: 60px;margin-left: 20px;cursor: pointer"
                          @click="freshWeb">
                        <i class="el-icon-share"></i>&nbsp;蓝风短链平台
                    </span>
                </el-col>
                <el-col :span="14">
                    <el-menu :default-active="activeIndex" mode="horizontal" @select="handleSelect"
                             background-color="#00162A" text-color="#fff" active-text-color="#ffd04b">
                        <el-menu-item index="index">
                            <span style="font-weight: bold">首页</span>
                        </el-menu-item>
                        <el-menu-item index="apidoc">
                            <span style="font-weight: bold">API文档</span>
                        </el-menu-item>
                        <el-menu-item index="about">
                            <span style="font-weight: bold">关于我们</span>
                        </el-menu-item>
                    </el-menu>
                </el-col>

                <el-col :span="2" style="padding-top: 12px">
                    <el-button size="medium" round @click="login()">注册/登录</el-button>
                </el-col>
            </el-row>
        </el-header>
        <el-main style="background-color: #FFF;">
            <div id="bd">
                <div class="wrap">
                    <div class="block">
                        <div class="hd">
                            <el-link type="primary" @click="toggle('generate')" icon="el-icon-circle-plus-outline">生成短链&nbsp;&nbsp;</el-link>
                            <el-link type="primary" @click="toggle('enable')" icon="el-icon-check">启用短链&nbsp;&nbsp;</el-link>
                            <el-link type="primary" @click="toggle('disable')" icon="el-icon-close">禁用短链&nbsp;&nbsp;</el-link>
                            <el-link type="primary" @click="toggle('update')" icon="el-icon-time">更新短链失效时间&nbsp;&nbsp;</el-link>
                        </div>
                    </div>
                    <!-- 生成接口div此处开始结束 -->
                    <div id="generate" v-show="showGenerate">
                        <div class="block">
                            <div class="hd"><h4>1 请求地址</h4></div>
                            <div class="bd">
                                <p>
                                    http://192.168.0.105:8076/api/generate
                                </p>
                            </div>
                        </div>
                        <div class="block">
                            <div class="hd"><h4>2 请求方式</h4></div>
                            <div class="bd">
                                <p>
                                    GET/POST
                                </p>
                            </div>
                        </div>

                        <div class="block">
                            <div class="hd"><h4>3 输入参数</h4></div>
                            <div class="bd">
                                <p>
                                <table border="1">
                                    <tr>
                                        <th>参数名</th>
                                        <th>参数类型</th>
                                        <th>是否必需</th>
                                        <th>描述</th>
                                        <th>示例值</th>
                                    </tr>
                                    <tr>
                                        <td>originalUrl</td>
                                        <td>String</td>
                                        <td>是</td>
                                        <td>UrlEncode('原始链接')</td>
                                        <td>http%3a%2f%2fwww.baidu.com</td>
                                    </tr>
                                    <tr>
                                        <td>status</td>
                                        <td>String</td>
                                        <td>否</td>
                                        <td>短链状态：0--启用，1--禁用</td>
                                        <td>0</td>
                                    </tr>
                                    <tr>
                                        <td>expireDate</td>
                                        <td>String</td>
                                        <td>否</td>
                                        <td>短链过期失效的时间，格式为yyyyMMddHHmmss</td>
                                        <td>20220525190720</td>
                                    </tr>
                                </table>
                                </p>
                            </div>
                        </div>

                        <div class="block">
                            <div class="hd"><h4>4 设置请求头</h4></div>
                            <div class="bd">
                                <p>
                                <table border="1">
                                    <tr>
                                        <th>KEY</th>
                                        <th>VALUE</th>
                                        <th>是否必需</th>
                                        <th>描述</th>
                                        <th>示例值</th>
                                    </tr>
                                    <tr>
                                        <td>access_key</th>
                                        <td>String</td>
                                        <td>是</td>
                                        <td>access_key注册后获取</td>
                                        <td>b6febb10ddd47f49c451046c1afb414</td>
                                    </tr>
                                    <tr>
                                        <td>reqtime</th>
                                        <td>String</td>
                                        <td>是</td>
                                        <td>当前时间，格式为yyyyMMddHHmmss</td>
                                        <td>20220619223516</td>
                                    </tr>
                                    <tr>
                                        <td>signature</th>
                                        <td>String</td>
                                        <td>是</td>
                                        <td>签名，规则是 access_key + access_key_secret + reqtime 然后进行MD5加密(16进制的)，access_key_secret注册后获取</td>
                                        <td>threemonth</td>
                                    </tr>
                                </table>
                                </p>
                            </div>
                        </div>
                        <div class="block">
                            <div class="hd"><h4>5 返回结果</h4></div>
                            <div class="bd">
                                <P>
                                    请求：<br/>
                                    http://192.168.0.105:8076/api/generate?originalUrl=https%3A%2F%2Fwww.jianshu.com%2Fp%2F7d4bc61c1a5b&validityPeriod=threemonth
                                </P>
                                <P>
                                    返回：<br/>
                                    {"code":200,"msg":"请求成功","data":"http://192.168.0.105:8076/2qve90"}
                                </P>
                                <p>
                                    <table border="1">
                                        <tr>
                                            <th>KEY</th>
                                            <th>VALUE</th>
                                            <th>描述</th>
                                            <th>示例值</th>
                                        </tr>
                                        <tr>
                                            <td>code</th>
                                            <td>String</td>
                                            <td>标识码，200为成功</td>
                                            <td>200</td>
                                        </tr>
                                        <tr>
                                            <td>msg</th>
                                            <td>String</td>
                                            <td>消息</td>
                                            <td>请求成功</td>
                                        </tr>
                                        <tr>
                                            <td>data</th>
                                            <td>String</td>
                                            <td>转换的短链</td>
                                            <td>http://192.168.0.105:8076/2qve90</td>
                                        </tr>
                                    </table>
                                </p>
                            </div>
                        </div>
                    </div>
                    <!-- 生成接口div到此结束 -->

                    <!-- 启用接口div此处开始结束 -->
                    <div id="enable" v-show="showEnable">
                        <div class="block">
                            <div class="hd"><h4>1 请求地址</h4></div>
                            <div class="bd">
                                <p>
                                    http://192.168.0.105:8076/api/enable
                                </p>
                            </div>
                        </div>
                        <div class="block">
                            <div class="hd"><h4>2 请求方式</h4></div>
                            <div class="bd">
                                <p>
                                    GET/POST
                                </p>
                            </div>
                        </div>
                        <div class="block">
                            <div class="hd"><h4>3 输入参数</h4></div>
                            <div class="bd">
                                <p>
                                <table border="1">
                                    <tr>
                                        <th>参数名</th>
                                        <th>参数类型</th>
                                        <th>是否必需</th>
                                        <th>描述</th>
                                        <th>示例值</th>
                                    </tr>
                                    <tr>
                                        <td>shortUrl</td>
                                        <td>String</td>
                                        <td>是</td>
                                        <td>短链接</td>
                                        <td>2pEKPH</td>
                                    </tr>
                                </table>
                                </p>
                            </div>
                        </div>
                        <div class="block">
                            <div class="hd"><h4>4 设置请求头</h4></div>
                            <div class="bd">
                                <p>
                                <table border="1">
                                    <tr>
                                        <th>KEY</th>
                                        <th>VALUE</th>
                                        <th>是否必需</th>
                                        <th>描述</th>
                                        <th>示例值</th>
                                    </tr>
                                    <tr>
                                        <td>access_key</th>
                                        <td>String</td>
                                        <td>是</td>
                                        <td>access_key注册后获取</td>
                                        <td>b6febb10ddd47f49c451046c1afb414</td>
                                    </tr>
                                    <tr>
                                        <td>reqtime</th>
                                        <td>String</td>
                                        <td>是</td>
                                        <td>当前时间，格式为yyyyMMddHHmmss</td>
                                        <td>20220619223516</td>
                                    </tr>
                                    <tr>
                                        <td>signature</th>
                                        <td>String</td>
                                        <td>是</td>
                                        <td>签名，规则是 access_key + access_key_secret + reqtime 然后进行MD5加密(16进制的)，access_key_secret注册后获取</td>
                                        <td>threemonth</td>
                                    </tr>
                                </table>
                                </p>
                            </div>
                        </div>
                        <div class="block">
                            <div class="hd"><h4>5 返回结果</h4></div>
                            <div class="bd">
                                <P>
                                    请求：<br/>
                                    http://192.168.0.105:8076/api/enable?shortUrl=2pEKPH
                                </P>
                                <P>
                                    返回：<br/>
                                    {"code":200,"msg":"启用短链2pEKPH成功","data": ""}
                                </P>
                                <p>
                                <table border="1">
                                    <tr>
                                        <th>KEY</th>
                                        <th>VALUE</th>
                                        <th>描述</th>
                                        <th>示例值</th>
                                    </tr>
                                    <tr>
                                        <td>code</th>
                                        <td>String</td>
                                        <td>标识码，200为成功</td>
                                        <td>200</td>
                                    </tr>
                                    <tr>
                                        <td>msg</th>
                                        <td>String</td>
                                        <td>消息</td>
                                        <td>请求成功</td>
                                    </tr>
                                    <tr>
                                        <td>data</th>
                                        <td>String</td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                </table>
                                </p>
                            </div>
                        </div>
                    </div>
                    <!-- 启用接口div到此结束 -->

                    <!-- 禁用接口div此处开始结束 -->
                    <div id="disable" v-show="showDisable">
                        <div class="block">
                            <div class="hd"><h4>1 请求地址</h4></div>
                            <div class="bd">
                                <p>
                                    http://192.168.0.105:8076/api/disable
                                </p>
                            </div>
                        </div>
                        <div class="block">
                            <div class="hd"><h4>2 请求方式</h4></div>
                            <div class="bd">
                                <p>
                                    GET/POST
                                </p>
                            </div>
                        </div>
                        <div class="block">
                            <div class="hd"><h4>3 输入参数</h4></div>
                            <div class="bd">
                                <p>
                                <table border="1">
                                    <tr>
                                        <th>参数名</th>
                                        <th>参数类型</th>
                                        <th>是否必需</th>
                                        <th>描述</th>
                                        <th>示例值</th>
                                    </tr>
                                    <tr>
                                        <td>shortUrl</td>
                                        <td>String</td>
                                        <td>是</td>
                                        <td>短链接</td>
                                        <td>2pEKPH</td>
                                    </tr>
                                </table>
                                </p>
                            </div>
                        </div>
                        <div class="block">
                            <div class="hd"><h4>4 设置请求头</h4></div>
                            <div class="bd">
                                <p>
                                <table border="1">
                                    <tr>
                                        <th>KEY</th>
                                        <th>VALUE</th>
                                        <th>是否必需</th>
                                        <th>描述</th>
                                        <th>示例值</th>
                                    </tr>
                                    <tr>
                                        <td>access_key</th>
                                        <td>String</td>
                                        <td>是</td>
                                        <td>access_key注册后获取</td>
                                        <td>b6febb10ddd47f49c451046c1afb414</td>
                                    </tr>
                                    <tr>
                                        <td>reqtime</th>
                                        <td>String</td>
                                        <td>是</td>
                                        <td>当前时间，格式为yyyyMMddHHmmss</td>
                                        <td>20220619223516</td>
                                    </tr>
                                    <tr>
                                        <td>signature</th>
                                        <td>String</td>
                                        <td>是</td>
                                        <td>签名，规则是 access_key + access_key_secret + reqtime 然后进行MD5加密(16进制的)，access_key_secret注册后获取</td>
                                        <td>threemonth</td>
                                    </tr>
                                </table>
                                </p>
                            </div>
                        </div>
                        <div class="block">
                            <div class="hd"><h4>5 返回结果</h4></div>
                            <div class="bd">
                                <P>
                                    请求：<br/>
                                    http://192.168.0.105:8076/api/disable?shortUrl=2pEKPH
                                </P>
                                <P>
                                    返回：<br/>
                                    {"code":200,"msg":"禁用短链2pEKPH成功","data": ""}
                                </P>
                                <p>
                                <table border="1">
                                    <tr>
                                        <th>KEY</th>
                                        <th>VALUE</th>
                                        <th>描述</th>
                                        <th>示例值</th>
                                    </tr>
                                    <tr>
                                        <td>code</th>
                                        <td>String</td>
                                        <td>标识码，200为成功</td>
                                        <td>200</td>
                                    </tr>
                                    <tr>
                                        <td>msg</th>
                                        <td>String</td>
                                        <td>消息</td>
                                        <td>请求成功</td>
                                    </tr>
                                    <tr>
                                        <td>data</th>
                                        <td>String</td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                </table>
                                </p>
                            </div>
                        </div>
                    </div>
                    <!-- 禁用接口div到此结束 -->


                    <!-- 禁用接口div此处开始结束 -->
                    <div id="update" v-show="showUpdate">
                        <div class="block">
                            <div class="hd"><h4>1 请求地址</h4></div>
                            <div class="bd">
                                <p>
                                    http://192.168.0.105:8076/api/expire
                                </p>
                            </div>
                        </div>
                        <div class="block">
                            <div class="hd"><h4>2 请求方式</h4></div>
                            <div class="bd">
                                <p>
                                    GET/POST
                                </p>
                            </div>
                        </div>
                        <div class="block">
                            <div class="hd"><h4>3 输入参数</h4></div>
                            <div class="bd">
                                <p>
                                <table border="1">
                                    <tr>
                                        <th>参数名</th>
                                        <th>参数类型</th>
                                        <th>是否必需</th>
                                        <th>描述</th>
                                        <th>示例值</th>
                                    </tr>
                                    <tr>
                                        <td>shortUrl</td>
                                        <td>String</td>
                                        <td>是</td>
                                        <td>短链接</td>
                                        <td>2pEKPH</td>
                                    </tr>
                                    <tr>
                                        <td>expireDate</td>
                                        <td>String</td>
                                        <td>是</td>
                                        <td>短链过期失效的时间，格式为yyyyMMddHHmmss</td>
                                        <td>20220624143424</td>
                                    </tr>
                                </table>
                                </p>
                            </div>
                        </div>
                        <div class="block">
                            <div class="hd"><h4>4 设置请求头</h4></div>
                            <div class="bd">
                                <p>
                                <table border="1">
                                    <tr>
                                        <th>KEY</th>
                                        <th>VALUE</th>
                                        <th>是否必需</th>
                                        <th>描述</th>
                                        <th>示例值</th>
                                    </tr>
                                    <tr>
                                        <td>access_key</th>
                                        <td>String</td>
                                        <td>是</td>
                                        <td>access_key注册后获取</td>
                                        <td>b6febb10ddd47f49c451046c1afb414</td>
                                    </tr>
                                    <tr>
                                        <td>reqtime</th>
                                        <td>String</td>
                                        <td>是</td>
                                        <td>当前时间，格式为yyyyMMddHHmmss</td>
                                        <td>20220619223516</td>
                                    </tr>
                                    <tr>
                                        <td>signature</th>
                                        <td>String</td>
                                        <td>是</td>
                                        <td>签名，规则是 access_key + access_key_secret + reqtime 然后进行MD5加密(16进制的)，access_key_secret注册后获取</td>
                                        <td>threemonth</td>
                                    </tr>
                                </table>
                                </p>
                            </div>
                        </div>
                        <div class="block">
                            <div class="hd"><h4>5 返回结果</h4></div>
                            <div class="bd">
                                <P>
                                    请求：<br/>
                                    http://192.168.0.105:8076/api/expire?shortUrl=2pEKPH
                                </P>
                                <P>
                                    返回：<br/>
                                    {"code":200,"msg":"更改短链失效时间2pEKPH成功，更新后为：20220624143424","data": ""}
                                </P>
                                <p>
                                <table border="1">
                                    <tr>
                                        <th>KEY</th>
                                        <th>VALUE</th>
                                        <th>描述</th>
                                        <th>示例值</th>
                                    </tr>
                                    <tr>
                                        <td>code</th>
                                        <td>String</td>
                                        <td>标识码，200为成功</td>
                                        <td>200</td>
                                    </tr>
                                    <tr>
                                        <td>msg</th>
                                        <td>String</td>
                                        <td>消息</td>
                                        <td>请求成功</td>
                                    </tr>
                                    <tr>
                                        <td>data</th>
                                        <td>String</td>
                                        <td></td>
                                        <td></td>
                                    </tr>
                                </table>
                                </p>
                            </div>
                        </div>
                    </div>
                    <!-- 禁用接口div到此结束 -->

                </div>
            </div>

        </el-main>

        <el-footer style="background-color: #FFF">
            <el-row>
                <el-col :span="24" align="middle">
                    <span style="color: #606288;font-size: 12px;">
                        免责声明：短链接由用户生成，所跳转的内容与本站无关。本站禁止违法违规内容的网站生成短链接，如有发现立刻封停！
                    </span>
                    <br/>
                    <span style="color: #606288;font-size: 12px;">
                        ICP备案：<a href="http://beian.miit.gov.cn" target="_blank">鲁ICP备xxxxxxx号-1</a> | 联系我们：xxxx@163.com | <a
                            href="https://www.baidu.com/" target="_blank">资讯中心</a> | <a href="https://www.baidu.com/"
                                                                                        target="_blank">关于我们</a>
                    </span>
                </el-col>
            </el-row>
        </el-footer>
    </el-container>
</div>


<script>
    var ctx = /*[[@{/}]]*/'';

    new Vue({
        el: '#app',
        data: function () {
            return {
                activeIndex: 'apidoc',

                showGenerate: true,
                showEnable: false,
                showDisable: false,
                showUpdate: false
            }
        },
        methods: {
            freshWeb() {
                window.location.reload();
            },
            login() {
                // 跳转租户登录页
                window.location.href = ctx + "tenant/login";
            },
            handleSelect(key, keyPath) {
                console.log(key, keyPath);
                if (key === 'index') {
                    window.location.href = ctx + '/';
                } else if (key === 'apidoc') {
                    window.location.href = ctx + 'apiDoc';
                } else if (key === 'about') {
                    window.location.href = ctx + 'about';
                }
            },
            toggle(para) {
                switch(para) {
                    case 'generate':
                        this.showGenerate = true;
                        this.showEnable = false;
                        this.showDisable = false;
                        this.showUpdate = false;
                        break;
                    case 'enable':
                        this.showEnable = true;
                        this.showGenerate = false;
                        this.showDisable = false;
                        this.showUpdate = false;
                        break;
                    case 'disable':
                        this.showEnable = false;
                        this.showGenerate = false;
                        this.showDisable = true;
                        this.showUpdate = false;
                        break;
                    case 'update':
                        this.showEnable = false;
                        this.showGenerate = false;
                        this.showDisable = false;
                        this.showUpdate = true;
                        break;
                    default:
                        this.showGenerate = true;
                        this.showEnable = false;
                        this.showDisable = false;
                        this.showUpdate = false;
                }
            }
        }
    });
</script>
</body>
</html>